<template>
  <div class="bot-design-page">
    <BotDesign ref="bot-design"
               :botIds="botId" />
  </div>
</template>

<script>
import BotDesign from './bot-design'

export default {
  name: 'bot-design',
  components: { BotDesign },
  data () {
    return {
      botId: null,
      designMode: null
    }
  },
  activated () {
    if (!this.botId) {
      this.getBotId()
    } else {
      if (this.$getQuery('botId') !== localStorage.getItem('designBotId')) {
        this.getBotId()
      }
    }
  },
  destroyed () {
    localStorage.removeItem('designBotId')
  },
  methods: {
    getBotId () {
      this.botId = this.$getQuery('botId')
      setTimeout(() => {
        localStorage.setItem('designBotId', this.botId)
        this.$refs['bot-design'].init()
      }, 300)
    }
  }
}
</script>

<style lang="scss" scoped>
.bot-design-page {
  height: calc(100vh - 50px - 38px - 30px);
}
</style>
